<template>
    <div>
        <el-row>
            <el-col :span="12">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="it in pccategory" :key="it.id" :label="it.name" :cid="it.id">
                        <el-table :data="categorylist" stripe style="width: 100%">
                            <el-table-column prop="name" label="分类名"> </el-table-column>
                            <el-table-column prop="name" label="图片">
                                <template slot-scope="scope">
                                    <img class="smallimg" :src="scope.row.imgurl" alt="" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col class="tag" :span="11">
                <el-form ref="form" :model="form" :rules="myrules" label-width="80px">
                    <el-form-item prop="name" label="一级分类">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即添加</el-button>
                    </el-form-item>
                </el-form>
                <el-form ref="form" :model="cform" :rules="myrules" label-width="80px">
                    <el-form-item prop="cid" label="商品分类">
                        <el-select @change="changeselect" v-model="pacategory" placeholder="请选择分类">
                            <el-option v-for="i in pccategory" :key="i.id" :label="i.name" :value="i.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-show="flag" prop="name" label="子分类">
                        <el-input v-model="cform.name"></el-input>
                    </el-form-item>
                    <el-form-item v-show="flag" prop="photo" label="商品图片">
                        <el-upload
                            :limit="1"
                            :on-exceed="overnum"
                            v-model="form.picture"
                            name="photo"
                            :action="url"
                            ref="upload"
                            :headers="token"
                            list-type="picture-card"
                            :auto-upload="true"
                            id="xxx"
                            :on-success="filesuccess"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="conSubmit">添加子分类</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import url from '../../assets/js/baseurl.js';
export default {
    data() {
        return {
            form: {
                name: '',
                parent_id: 0
            },
            parent_id: '',
            flag: false,
            cform: {
                name: ''
            },
            token: {},
            activeName: 'second',
            pacategory: '',
            pccategory: [],
            url: '',
            imgurl: '',
            categorylist: [],
            myrules: {
                name: [{ required: true, message: '请输入商品名', trigger: 'blur' }]
            }
        };
    },
    mounted: async function () {
        let res = await this.$http.get(`${url.xiaoli}/list/category`,{params:{num:100}});
        // console.log(res.data.data.lists);
        this.pccategory = res.data.data.lists;
        this.token = { token: sessionStorage.getItem('access_token') };
        this.url = url.xiaoli + '/files';
    },
    methods: {
        overnum: function () {
            this.$message.error('只能上传一张图片');
        },
        filesuccess: function (res) {
            this.imgurl = JSON.stringify(res);
            console.log(this.imgurl);
        },
        changeselect: function (id) {
            this.flag = true;
            this.parent_id = id;
        },
        onSubmit: async function () {
            try {
                this.$refs.form.validate();
                let res = await this.$http.post(`${url.xiaoli}/add/category`, this.form);
                if (res.data.code) {
                    this.$message.success(res.data.msg);
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (error) {}
        },
        conSubmit: async function () {
            let res = await this.$http.post(`${url.xiaoli}/add/category`, {
                parent_id: this.parent_id,
                imgurl: this.imgurl,
                name: this.cform.name
            });
            if (res.data.code) {
                this.$message.success(res.data.msg);
            } else {
                this.$message.error(res.data.msg);
            }
            // console.log({parent_id:this.parent_id,imgurl:this.imgurl,name:this.cform.name});
        },
        open: function (msg) {
            this.$message(msg);
        },

        async handleClick(tab) {
            let res = await this.$http.get(`${url.xiaoli}/list/category`, { params: { parent_id: tab.$attrs.cid } });
            this.categorylist = res.data.data.lists;
            for (const it of this.categorylist) {
                it.imgurl = `${url.xiaoli}/${JSON.parse(it.imgurl).photoUrl[0]}`;
            }
            // console.log( this.categorylist);
        }
    },
    computed: {
        getform: async function () {}
    }
};
</script>

<style scoped>
.demo-table-expand {
    font-size: 0;
}
.tag {
    margin-top: 6px;
}
.smallimg {
    width: 45px;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
}
</style>